<script setup lang="ts">
import expert_1 from "./expert_1.vue"

</script>
<template>
    <div class="wrapper">
        <div class="item">
            <h3 class="title font-lg font-bold">
                联盟简介
            </h3>
            <p class="synopsis font font-normal">
            中关村国联绿色产业服务创新联盟（Zhongguancun National-united Green Industry Service Innovate Alliance，GIIA），联盟总部位于北京。中关村国联绿色产业服务创新联盟（简称绿色产业联盟）是由引领我国绿色产业发展,具有代表性的科研院所、企事业单位和金融机构等共同发起，经民政部门批准成立的跨行业、跨地区、全国性的社团组织，业务上接受国家发展改革委、科技部、生态环境部、中关村科技园区管理委员会等部门和单位指导。
            </p>
            <div class="union-box">
                <div class="union-row flex">
                    <div class="union-item union-item-arrow">
                        <div class="union-icon">
                            <img src="https://img.cctvch.cn/uploads/f062d2e5d42582445781d50bf38f72f4.png" alt="">
                        </div>
                        <p class="union-item-title font-m font-bold color-title">
                            <span>宗旨</span>
                        </p>
                        <p class="union-item-text">
                        贯彻习近平生态文明思想，坚持节约资源和保护环境基本国策，落实绿色发展理念，依靠广大会员，联系各方力量，发挥桥梁纽带作用，为建立健全绿色循环低碳发展的经济体系，构建市场导向的绿色技术创新体系，培育壮大绿色产业，加快建设生态生态文明，建设美丽中国做出积极贡献。
                        </p>
                    </div>
                    <div class="union-item union-item-arrow">
                        <div class="union-icon">
                            <img src="https://img.cctvch.cn/uploads/3034f49310a6125284c042ee294e4bf9.png" alt="">
                        </div>
                        <p class="union-item-title font-m font-bold color-title">
                            <span>使命</span>
                        </p>
                        <p class="union-item-text">聚集绿色发展新资源、培育绿色技术新动能、建设绿色产业新高地。</p>
                    </div>
                    <div class="union-item">
                        <div class="union-icon">
                            <img src="https://img.cctvch.cn/uploads/9b8788aad91ee24c46e0b30b0b52ac22.png" alt="">
                        </div>
                        <p class="union-item-title font-m font-bold color-title">
                            <span>愿景</span>
                        </p>
                        <p class="union-item-text">共建绿水青山、共创金山银山、共迎美好生活。</p>
                    </div>
                </div>
                <div class="union-row flex">
                    <div class="union-item union-item-arrow">
                        <div class="union-icon">
                            <img src="https://img.cctvch.cn/uploads/b7605c64b29a402bc3994f0b4e3fd73a.png" alt="">
                        </div>
                        <p class="union-item-title font-m font-bold color-title">
                            <span>定位</span>
                        </p>
                        <p class="union-item-text">
                        绿色产业政策的宣传平台；绿色技术的对接平台；绿色金融的服务平台；典型案例推广的示范平台；优秀技术、企业的孵化平台；绿色发展的国际合作平台
                        </p>
                    </div>
                    <div class="union-item union-item-arrow">
                        <div class="union-icon" style="width:36px">
                            <img src="https://img.cctvch.cn/uploads/615d8acb0f54732bb3e9a78d5fe323aa.png" alt="">
                        </div>
                        <p class="union-item-title font-m font-bold color-title">
                            <span>服务对象</span>
                        </p>
                        <p class="union-item-text">服务政府、服务企业、服务社会。</p>
                    </div>
                    <div class="union-item">
                        <div class="union-icon">
                            <img src="https://img.cctvch.cn/uploads/baa1cb9529327b2e8cd5db3826b2bd67.png" alt="">
                        </div>
                        <p class="union-item-title font-m font-bold color-title">
                            <span>服务领域</span>
                        </p>
                        <p class="union-item-text">节能环保产业、清洁生产产业、清洁能源产业、生态环境产业、基础设施绿色升级、绿色服务等绿色产业相关领域。</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <h3 class="title font-lg font-bold">
                专家指导委员会
            </h3>
            <expert_1></expert_1>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.item {
    .title {
        margin-top: 53px;
        margin-bottom: 34px;
    }

    .color-title {
        span {
            background-image: linear-gradient(to right, #252086 0%, #e60012 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }

    .synopsis {
        line-height: 22px;
    }

    .union-box {
        margin-top: 40px;

        .union-row {
            margin-bottom:50px;

            .union-item {
                position: relative;
                padding-left: 50px;
                padding-right: 63px;
                margin-right: 63px;
                &:nth-child(3){
                    margin-right: 0;
                }
                &:nth-child(1){
                    width:760px;
                }
                .union-icon {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 28px;
                    height: 28px;

                    img {
                        display: block;
                        width: 100%;
                        height: 100%;
                    }
                }

                .union-item-title {
                    margin-bottom: 14px;
                }

                .union-item-text {
                    line-height: 22px;
                }
            }

            .union-item-arrow::after {
                content: "";
                position: absolute;
                top: 18px;
                right: 0;
                display: inline-block;
                width: 14px;
                height: 14px;
                border: 3px solid #626675;
                border-left: 0px;
                border-bottom: 0px;
                transform: rotate(45deg);
            }
        }

    }
}
</style>